<template>
  <div class="table-page">
    <el-table :data="dataList" style="width: 100%" align="center">
      <el-table-column prop="" :label="headerTitle.img" width="100">
        <template class="call-img" slot-scope="scope"><img class="table-img" :src="scope.row.imgUrl" /></template>
      </el-table-column>
      <el-table-column prop="fruitsName" :label="headerTitle.fruitsName" align="center" width="120"> </el-table-column>
      <el-table-column prop="fruitsaddr" :label="headerTitle.fruitsaddr" align="center" width="120"> </el-table-column>
      <el-table-column prop="price" :label="headerTitle.price" align="center" width="120"> </el-table-column>
      <el-table-column prop="nums" :label="headerTitle.nums" align="center" width="120"> </el-table-column>
      <el-table-column prop="totalPrice" :label="headerTitle.totalPrice" align="center" width="120"> </el-table-column>
      <el-table-column label="订取" align="center" width="180">
        <template slot-scope="scope">
          <el-button class="cooper-flag" title="增加" type="success" @click="getFruit(scope.row)" icon="el-icon-circle-plus-outline" circle></el-button>
          <el-button class="cooper-flag" title="减少" type="danger" @click="loseFruit(scope.row)" icon="el-icon-remove-outline" circle></el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button v-if="headerTitle.detail" size="mini" type='primary' @click="lookDetail(scope.row)">详情</el-button>
          <el-button v-if="headerTitle.edit" size="mini" type='warning' @click="setEmpty(scope.row)">清空</el-button>
          <el-button v-if="headerTitle.delete" size="mini" type="danger" @click="deleteFruit(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

      <slot name='table-column' class="slot-column"></slot>
  </div>
</template>

<script>
export default {
  name: 'Table',
  props: {
    dataList: Array,
    headerTitle: Object
  },
  methods: {
    getFruit (e) {
      this.$emit('getFruit', e)
    },
    loseFruit (e) {
      this.$emit('loseFruit', e)
    },
    setEmpty  (e) {
      this.$emit('setEmpty', e)
    },
    deleteFruit  (e) {
      this.$emit('deleteFruit', e)
    },
    lookDetail (e) {
      this.$emit('lookDetail', e)
    }
  }
}
</script>

<style scoped>
.table-page{
  position: relative;
}
.cell {
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.table-img {
  width: 60px;
  height: 60px;
}
.slot-column{
  position: absolute;
}
</style>
